<template>
  <div style="height: 100%;">
    
    
    <div class="box1">
     
      <div style="width: 100%;height: 30%;margin-top: 1.5vh;">
                
        
        <el-form :inline="true" :model="formInline" style="margin-left: 2vh;text-align: left;margin-top: 1vh;width: 100%;" class="demo-form-inline">
          <el-form-item label="数据指标:">
            <el-radio-group @change="retrieveHydrogenDataBase" v-model="dataIndicators">
              <el-radio-button label="photovoltaicPowerGeneration">光伏发电</el-radio-button>
              <el-radio-button label="hydrogen_db_plan">规划</el-radio-button>
              <el-radio-button label="hydrogen_db_design">设计</el-radio-button>
              <el-radio-button label="hydrogen_db_produce">生产</el-radio-button>
              <el-radio-button label="hydrogen_db_run">运行</el-radio-button>
              <el-radio-button label="hydrogen_db_maintenance">维护</el-radio-button> 
              <el-radio-button label="hydrogen_db_recycling">回收利用</el-radio-button> 

            </el-radio-group>
          </el-form-item>

          <!-- <el-form-item label="数据编号:">
            <el-input style="width: 90%;margin-top: 0vh;" v-model="dataNo"></el-input>
          </el-form-item> -->

          <el-form-item label="数据名称:">
            <el-input style="width: 90%;margin-top: 0vh;" v-model="dataName"></el-input>
          </el-form-item>

          <el-button type="primary" v-show="this.dataIndicators!='photovoltaicPowerGeneration'"  @click="deleteHydrogenDataBase()" style="float: right;margin-right: 3vh;">
            <span class="button-text">删除</span>
          </el-button>
          
          <el-button type="primary" @click="retrieveHydrogenDataBase()" style="float: right;margin-right: 3vh;">
            <span class="button-text">查询</span>
          </el-button>
     

        </el-form>
      
      </div>

    </div>

    
    
    <div class="box2">

      <el-table v-show="this.dataIndicators=='photovoltaicPowerGeneration'" ref="multipleTable1" :data="tableData" height="650" style="width: 100%;">
        
        <el-table-column label="热带季风">
          <el-table-column
            prop="value1"
            label="海南"
            width="120">
          </el-table-column>
           
        </el-table-column>
                
        <el-table-column label="亚热带季风">
          <el-table-column
            prop="value2"
            label="云南"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value3"
            label="广西"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value4"
            label="广东"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value5"
            label="福建"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value6"
            label="浙江"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value7"
            label="江西"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value8"
            label="湖南"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value9"
            label="贵州"
            width="120">
          </el-table-column>

          <el-table-column
            prop="value10"
            label="重庆"
            width="120">
          </el-table-column>

          <el-table-column
            prop="value11"
            label="湖北"
            width="120">
          </el-table-column>

          <el-table-column
            prop="value12"
            label="安徽"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value13"
            label="上海"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value14"
            label="江苏"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value15"
            label="山西"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value16"
            label="陕西"
            width="120">
          </el-table-column>

         </el-table-column>

         <el-table-column label="温带季风">

          <el-table-column
            prop="value17"
            label="河南"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value18"
            label="河北"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value19"
            label="山东"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value20"
            label="北京"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value21"
            label="天津"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value22"
            label="辽宁"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value23"
            label="吉林"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value24"
            label="黑龙江"
            width="120">
          </el-table-column>
        </el-table-column>  

        <el-table-column label="温带大陆">


          <el-table-column
            prop="value25"
            label="内蒙古"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value26"
            label="宁夏"
            width="120">
          </el-table-column>
        </el-table-column>

        <el-table-column label="高原山地">

          <el-table-column
            prop="value27"
            label="甘肃"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value28"
            label="新疆"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value29"
            label="青海"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value30"
            label="西藏"
            width="120">
          </el-table-column>
          <el-table-column
            prop="value31"
            label="四川"
            width="120">
          </el-table-column>

           
        </el-table-column>


     
      </el-table>
      <el-pagination v-show="this.dataIndicators=='photovoltaicPowerGeneration'" 
              background
              layout="prev, pager, next,jumper, ->, total, slot"
              :total="8760"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="24"
              style="text-align: center">
      </el-pagination>

      <el-table height="680" v-show="this.dataIndicators!='photovoltaicPowerGeneration'" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
  
        <!-- <el-table-column
          prop="dataIndicators"
          label="数据指标" 
          align="center"
          width="120">
        </el-table-column> -->

        <!-- <el-table-column
          prop="dataNo"
          label="数据编号"
          align="center"
          width="120">
        </el-table-column> -->
        
        <el-table-column
          prop="dataName"
          label="数据名称"
          align="center"
          width="150">
        </el-table-column>

        <el-table-column
            v-for="item in columnData"
            :key="item"
            :label="item.label" 
            :prop="item.prop" 
            align="center"
            width="200"
        >
        </el-table-column>
     
      </el-table>

    </div>

  </div>
</template>

<script>
 

  export default {
    name: 'hydrogenDataBase',
    components: {
      
     },

    data() {
      return {
        currentPage:"1",
        dataIndicators:"photovoltaicPowerGeneration",
        dataNo:"",
        dataName:"",
        tableData:[

        ],
        columnData:[
   
        ],
        multipleSelection: []

      }
    },
    mounted: function() {
      this.retrieveHydrogenDataBase();
    },
    methods: {  
      handleCurrentChange:function(val){
        var vm = this;

        this.$http.post('/iepsapi/ieps/basicDatabase/retrieveDataBase?dataIndicators='+this.dataIndicators+"&dataNo="+this.dataNo+"&dataName="+this.dataName+"&currentPage="+val).then((res) => {
          var result = res.data;
           
          if(result){
            vm.tableData = result.tableData;
          }
        }).catch((error) => {
          console.log(error);
        });

      },
      retrieveHydrogenDataBase:function(){
        
        var vm = this;

        this.$http.post('/iepsapi/ieps/basicDatabase/retrieveDataBase?dataIndicators='+this.dataIndicators+"&dataNo="+this.dataNo+"&dataName="+this.dataName+"&currentPage="+this.currentPage).then((res) => {
          var result = res.data;
           
          if(result){
            vm.columnData = result.columnData;
            vm.tableData = result.tableData;
          }
        }).catch((error) => {
          console.log(error);
        });


      },
      
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteHydrogenDataBase:function(){
        
        if(this.multipleSelection.length == 0){
          this.$message({
            message: '请选择您要删除的数据',
            type: 'info'
          });
        }else{

          this.$confirm('该操作将删除所选择的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            var vm = this;

            var ids = "";
            for(var i = 0;i < this.multipleSelection.length;i++){
              ids+=this.multipleSelection[i].id+",";
            }

            this.$http.post('/iepsapi/ieps/basicDatabase/deleteDataBase?dataIndicators='+this.dataIndicators+"&deleteData="+(ids)).then((res) => {
              var result = res.data;
              
              if(result){
                
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                vm.retrieveHydrogenDataBase();
                
              }
            }).catch((error) => {
              console.log(error);
            });

          });
        }

      },

    }
  }
</script>

<style scoped>

/deep/ .el-table th.el-table__cell.is-leaf {
     border-bottom: none;
 }
 /deep/ .el-table::before{
     background-color:transparent;
 }


    .titleDiv {
      width: 100%;
      margin: 0.5vh;
      height: 2.5vh; 
      font-weight: bold; 
      -webkit-box-shadow: none;
      box-shadow: none;
      font-weight: 700;
      font-style: normal;
      font-size: 2vh;
      color: #f2f2f2;
      text-align: left;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
    }
    .barColorBox {
      height: 2.5vh;
      width: 0.7vh;
      border-radius: 1px;
      display: inline-block;
      vertical-align: text-bottom;
      border: none;
      box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
      background-color: #FAFAFA;
      background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
      background-image: -o-linear-gradient(top,#17b4db,#07c968);
      background-image: -ms-linear-gradient(top,#17b4db,#07c968);
      background-image: linear-gradient(top,#17b4db,#07c968);
      background-repeat: repeat-x;
    }

    .titlefont {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
    }

    .box1{ 
      width: 100%;
      height: 7vh;
      margin: 0 auto;
      background: #101b55e3;
      border: 1px solid rgb(62 111 219 / 88%);
      border-radius: 5px;
    }

    
    .box2{ 
      width: 100%;
      height: 74vh;
      padding:10px;
      margin: 1vh auto;
      background: #101b55e3;
      border: 1px solid rgb(62 111 219 / 88%);
      border-radius: 5px;
    }


</style>
